<template>
  <div>
    <van-cell :to="`/shop/${item.shopId}`">
        <!-- 商家门店图片 -->
        <template #icon>
        <van-icon :name="getImagePath(item.shopImg)" 
            size="105"
            class="search-icon" 
            style="margin-right: 10px; margin-bottom: 10px;"/>
        </template>
        <!-- 店名及内容 -->
        <template #title>
        <span class="custom-title">{{item.shopName}}</span>
        </template>
        <template #label>
        <span class="pingfen-title">4.7分</span>
        <span class="yuexiao-title">月售1000+</span>
        <span class="renjun-title">人均￥xxx</span>
        <br>
        <span class="qisong-title">起送￥15</span>
        <span>配送约￥0</span>
        </template>
    </van-cell>
  </div>
</template>

<script>
export default {
    name:"Stores",
    props:['item'],
    data() {
        return {
          baseUrl: 'http://localhost:8081/images/shop/',
        }
    },
    methods:{
      //拼接地址
      getImagePath(imgName){
          return `${this.baseUrl}${imgName}`;
      },
    }
}
</script>

<style scoped>
.pingfen-title{
  color: #f87c00;
  font-weight:bold;
  font-size: 10px;
  margin-right: 7px;
}
.yuexiao-title{
  color: #929292;
  font-size: 1px;
  margin-right: 7px;
}
.renjun-title{
  color:#f87c00;
  font-size: 1px;
  margin-right: 7px;
}
.qisong-title{
  margin-right: 7px;
}
.custom-title{
  font-weight:bold
}
</style>